import React from 'react';
// import { Link } from 'react-router-dom';
import { Table, Select, DatePicker, Input } from 'antd';
import axios from 'axios';
import { apiPrefix } from 'shared/api';
import './index.less';

const { Option } = Select;
// const dateFormat = 'YYYY/MM/DD';


const columns = [
  {
    title: '序号',
    dataIndex: 'id',
    render: (text, recode, index) => index + 1
  },
  {
    title: '考勤日期',
    dataIndex: '',
    key: '',
  },
  {
    title: '员工编号',
    dataIndex: 'user.erp_id',
    key: 'user.erp_id',
  },
  {
    title: '姓名',
    dataIndex: 'user.name',
    key: 'user.name',
  },
  {
    title: '现场岗位',
    dataIndex: 'job.name',
    key: 'job.name',
  },
  {
    title: '工资档位',
    dataIndex: 'scene.gear_str',
    key: 'scene.gear_str',
  },
  {
    title: '岗位津贴',
    dataIndex: 'scene.subsidy',
    key: 'scene.subsidy',
  },
  {
    title: '本月出勤(天)',
    dataIndex: 'scene.work_days',
    key: 'scene.work_days',
  },
  {
    title: '双休日加班(天)',
    dataIndex: 'scene.weekend_work_days',
    key: 'scene.weekend_work_days',
  },
  {
    title: '日常加班(天)',
    dataIndex: 'scene.usual_days',
    key: 'scene.usual_days',
  },
  {
    title: '节假日加班(天)',
    dataIndex: 'scene.holiday_work_days',
    key: 'scene.holiday_work_days',
  },
  {
    title: '所在项目工程',
    dataIndex: 'project.name',
    key: 'project.name',
  },
  {
    title: '备注',
    dataIndex: 'project.descr',
    key: 'project.descr',
  },

];
export default class Attendance extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      attendance: [],
      project: [],
      queryProject: {},
    };
  }
  componentDidMount() {
    const api = `${apiPrefix}api/v1/unirole/projects`;
    axios.get(api)
      .then((response) => {
        this.setState({ project: response.data.data });
        console.log(this.state.project);
      });
  }
  handlOnChange=(value, key) => {
    const { queryProject } = this.state;
    console.log(queryProject);
    queryProject[key] = value;
    this.setState({ queryProject: { ...this.state.queryProject } });
  }
  query=() => {
    axios.request({
      url: `${apiPrefix}wdy_wage/api/v1/wage/attendance_query`,
      method: 'post',
      params: this.state.queryProject,
    })
      .then((response) => {
        this.setState({ attendance: response.data.data });
      });
  };
  clearInput=() => {
    // const { queryProject } = this.state;
    this.setState({ queryProject: {} });
  }
  render() {
    const { attendance, project, queryProject } = this.state;
    return (
      <div className="content">
        <div>
          <h3>考勤数据管理</h3>
          <section style={{ padding: 20, }}>
            <span style={{ marginLeft: 40 }}> 项目部</span>
            <Select
              style={{ width: 200, marginLeft: 20 }}
              showSearch
              className="select"
              placeholder="请选择项目部"
              onChange={value => this.handlOnChange(value.name, 'name')}
              optionFilterProp="children"
              filterOption={(input, option) =>
              option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
              }
            >
              {
              project.map((value, index) => (
                <Option value={value.id} key={index}>{value.name}</Option>
                ))
            }
            </Select>
            <span style={{ marginLeft: 40 }}>时间</span>
            <DatePicker
              placeholder="时间"
              value={queryProject.first_mfd_date_start}
              style={{ marginLeft: 20, width: 200 }}
              onChange={value => this.handlOnChange(value, 'first_mfd_date_start')}
            />
            <span style={{ marginLeft: 40 }}>员工编号</span>
            <Input
              placeholder="员工编号"
              value={queryProject.username}
              style={{ width: 200, marginLeft: 20 }}
            />
            <button className="queryButton" onClick={this.query}>查询</button>
            <button className="clearButton" onClick={this.clearInput}>清空查询列表</button>
          </section>
          <Table
            style={{
              height: 500,
              overflow: 'auto',
            }}
            rowKey="id"
            size="small"
            pagination={false}
            columns={columns}
            dataSource={attendance}
          />
        </div>
      </div>
    );
  }
}
